<template>
    <div class="online-mall">
        <template
            v-for="(item, index) in formData"
            :key="index"
        >
            <van-card
                :price="item.sc_ex2"
                :desc="''"
                :title="item.sc_ex1"
                :thumb="item.sf_ex50"
                lazy-load
            >
                <template #footer>
                    <div style="margin-bottom: 1vw;">
                        <van-icon 
                            name="delete-o" 
                            color="#bda7a7" 
                            size="5vw"
                            @click="deleteF(item, index)"
                        />
                    </div>
                    <van-stepper 
                        v-model="item.sc_ex3" 
                        integer 
                        default-value="1"
                        min="1"
                        @change="onStepChange"
                    />
                </template>
            </van-card>
        </template>
        <!-- 价格单位为分，所以要*100 -->
        <van-submit-bar 
            :price="totalAmount * 100"
            button-text="提交订单" 
            placeholder
            :disabled="totalNum == 0"
            @submit="onSubmit" 
        >
        </van-submit-bar>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onBeforeUnmount, toValue } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, closeToast, showFailToast } from 'vant'
    import { useStore } from '@/store'
    import { delshoppinginfoApi, getshoppinglistApi, saveShopinfoApi } from '@/apis'

    const router = useRouter()
    const route = useRoute()
    const store = useStore()

    const formData: Ref<any> = ref([
        // {
        //     sc_ex3: 0,
        //     sc_ex1: '商品标题',
        //     sc_ex2: '2.00',
        //     sf_ex50: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
        // },
    ])
    const totalAmount: Ref<number> = ref(0) //总选择金额
    const totalNum: Ref<number> = ref(0) //总选择商品种类

    onBeforeMount(() => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        });
        getshoppinglistApi({
            openid: store.openid,
            company: '海陵区凤栖园智慧墓园系统'
        }).then(res => {
            formData.value = res
            onStepChange()
        }).finally(() => {
            closeToast()
        })
    })
    const onStepChange = () => {
        totalAmount.value = 0
        totalNum.value = 0
        formData.value.forEach((item, index) => {
            if (Number(item.sc_ex3) > 0) {
                totalNum.value++
                totalAmount.value += item.sc_ex2 * item.sc_ex3
            }
        });
    }
    const deleteF = (val, idx) => {
        console.log(val)
        console.log(idx)
        formData.value.splice(idx, 1)
        onStepChange()
        delshoppinginfoApi({
            openid: store.openid,
            sc_ex1: val.sc_ex1
        })

    }
    const onSubmit = () => {
        console.log('submit')
        showLoadingToast({
            message: '加载中...',
            overlay: true,
            forbidClick: true,
            duration: 0
        })
        // 调接口
        saveShopinfoApi({
        }).then(res => {
            if (res[0].status == '+OK') {
                showDialog({
                    title: '提示',
                    message: res[0].msg,
                }).then(() => {
                    router.push('/')
                });
            } else {
                showDialog({
                    title: '提示',
                    message: res[0].msg,
                }).then(() => {

                });
            }
        }).catch(err => {
            showDialog({
                title: '提示',
                message: '网络异常，请稍后重试！',
            })
        }).finally(() => {
            closeToast()
        })
    }
    
</script>
<style lang="scss" scoped>
    .online-mall {
        display: flex;
        flex-direction: column;
        // height: 100vh;
        // overflow: hidden;
        // background-image: url('@/assets/bg/bg10.png');
        // background-size: 100% 100%;
    }
    
</style>